<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>角色列表</title>
	<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="/static/plugins/zTree/zTreeStyle/zTreeStyle.css"/>	
	<link rel="stylesheet" type="text/css" href="/static/common/common.css" />
	<style type="text/css">
		.input-inline-width{
			width: 250px!important;
		}
	</style>
</head>
<body class="body-container">
	<div>
		<button type="button" class="layui-btn layui-btn-normal layui-btn-sm add-role-btn">添加角色</button>
	</div>
			
	<!-- table表格数据 -->
	<div class="content-container">
		<table class="layui-hide" id="layerTable" lay-filter="layerTable"></table>
	</div>

	<script type="text/html" id="layuiTableToolbar">
  		<div class="layui-btn-container">
    				
  		</div>
	</script>
	
	<script src="/static/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script src="/static/layui/layui.all.js" type="text/javascript"></script>
	<script src="/static/plugins/zTree/js/jquery.ztree.all.min.js" type="text/javascript"></script>
	<script src="/static/common/common.js" type="text/javascript"></script>
	<script type="text/javascript" th:inline="none">
		$(document).ready(function() {
			
			layui.table.reload('layerTable',{url:table_url,page:{curr:1}});
		})
		
		// table
		var table_url = '/sysRole/selectPageInfoList';	
		layui.use('table', function(){
	        var table = layui.table;
	        table.render({
	            elem: '#layerTable'	
	            //,url:'/sysRole/selectPageInfoList'
	          	//,toolbar: '#layuiTableToolbar'
	       		,title: '角色数据表'		
				,height:600
				,method:'post'
				,limit:10
				,limits:[10,20,30]
				,where: {}
	            ,request: {
	                pageName: 'currentPage' //页码的参数名称，默认：page
	                ,limitName: 'pageSize' 	//每页数据量的参数名，默认：limit
	            }
	            ,response: {		
	                statusName: 'code' 		//数据状态的字段名称，默认：code
	                ,statusCode: 200 		//成功的状态码，默认：0
	                ,msgName: 'msg' 		//状态信息的字段名称，默认：msg
	                ,countName: 'total'  	//数据总数的字段名称，默认：count
	                ,dataName: 'dataObject' //数据列表的字段名称，默认：data
				}	
	            ,cols: [[		
	            	{field:'roleName',width:240, title: '角色名称'}
	            	,{field:'registerType',width:160, title: '注册类型',templet: 
	                	function(res){	
	               			return getRegisterTypeMsg(res.registerType);		
	                	}
	                }
	            	,{field:'roleType',width:160, title: '角色类型'}
	                ,{field:'createTime',width:240, title: '创建时间', sort: true,templet:'<div>{{ commonDateFormat(d.createTime,"yyyy-MM-dd hh:mm:ss")}}</div>'}
	                ,{field:'statusCode',width:180, title: '用户状态',templet: 
	                	function(res){	
	               			return getStatusCodeMsg(res.statusCode);	
	                	}
	                }
	                ,{field:'remark',width:280, title: '备注'}
	                ,{field:'right',title: '操作', templet: 
	                	function(res){		
		                	var html = "";	
	            			html += '<a class="layui-btn layui-btn-normal layui-btn-xs edit-role-btn" role-id="'+res.id+'" role-name='+res.roleName+' remark='+res.remark+'>';
	            			html += '<i class="layui-icon layui-icon-edit"></i>编辑</a>';
	            			return html;	
	                	}
	                }	
	            ]]	
	            ,page: true
	            ,done: function(res, curr, count){	
	            	
	            }
	        });  
    	});
		
		// 添加角色
		$(document).on('click', '.add-role-btn', function() {
			var index = layer.open({				
				type: 1 ,				  		// 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层
				title: "添加角色",					// title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
				area: ['70%', '60%'],		// 默认：'auto' 	自适应
				//shade: 1,				  		// 要想显示遮罩需要将这个  注释							
				skin: 'layui-layer-lan',  		// layer内置的skin有：layui-layer-lan layui-layer-molv
				maxmin: true,
				resize:true,		
				shadeClose:false,					
				content:initAddRoleHtml(),					
				btn: ['立即添加','取消'], 	
				btn1: function(){			

				},
				btn2: function(){				
					layer.close(index);		
				},
				cancel: function(){ 

				},		
				success: function(layers){		
					var form = layui.form;
					layers.addClass('layui-form');	
					layers.find('.layui-layer-btn0').attr('lay-filter', 'addRoleFrom').attr('lay-submit', '');//将按钮弄成能提交的
					form.render(); 	
					
					selectZtreeList();
					
					form.on('submit(addRoleFrom)', function (data) {	
						var treeObj = $.fn.zTree.getZTreeObj("menuZtreeId");
						var nodes = treeObj.getCheckedNodes(true);

						var menuZtreeIdAry = [];
						for (var i = 0; i < nodes.length; i++) {
							menuZtreeIdAry.push(nodes[i].id);
						}	
						if(menuZtreeIdAry.length<1){
							layer.msg("请选择菜单");
							return false;	
						}
						// 权限菜单
						data.field.menuZtreeIdList = menuZtreeIdAry.join();	
						$.ajax({			
							url: '/sysRole/addRoleInfo', 				// 请求的url地址	
							dataType: 'json', 							// 返回格式为json	
							data: data.field,
							type: 'post', 								// 请求方式		
							async: false,	
							success: function (res) {
								if (res.code == 200) {
									layer.msg("添加成功");	
									layer.close(index);	
									layui.table.reload('layerTable', { page: { curr: 1 }, where: { } });					
								}else{			
									layer.msg(res.msg);	
								}
							},		
							error: function () {

							}
						});
						return false;
					});	

				}	
			});
		})
		
		// 添加角色 html
		function initAddRoleHtml(){
			var html = "";		
			html+='<div style="margin: 40px 20px;">';	
			html+='<form class="layui-form" action="">';
			
			html+='<div class="layui-form-item">';
			html+='<div class="layui-inline">';
			html+='<label class="layui-form-label zdy-required">角色名称</label>';
			html+='<div class="layui-input-inline input-inline-width">';
			html+='<input type="tel" name="roleName" lay-verify="required" maxlength="14" placeholder="请输入角色名称" autocomplete="off" class="layui-input">';
			html+='</div>';
			html+='</div>';
			html+='</div>';
			
			html+='<div class="layui-form-item">';	
			html+='<div class="layui-inline">';
			html+='<label class="layui-form-label zdy-required">角色类型</label>';	
			html+='<div class="layui-input-inline" style="width: 350px;">';			
			html+='<input type="radio" name="roleType" value="register" lay-filter="roleType" title="注册绑定" checked="">';
			html+='<input type="radio" name="roleType" value="default" lay-filter="roleType" title="默认">';	
			html+='<input type="radio" name="roleType" value="employee" lay-filter="roleType" title="员工">';	
			html+='</div>';	
			html+='</div>';	
			html+='</div>';	
			
			html+='<div class="layui-form-item">';	
			// 显示一级菜单	菜单样式  二级显示所有的一级菜单
			html+='<div class="layui-inline one-menu-select-container">';
			html+='<label class="layui-form-label zdy-required">注册类型</label>';
			html+='<div class="layui-input-inline input-inline-width">';
			html+='<select name="registerType" lay-verify="required">';
			html+='<option value=""></option>';
			html+='<option value="system">系统</option>';
			html+='<option value="shop">店铺</option>';
			html+='<option value="supplier">供应商</option>';
			html+='</select>';
			html+='</div>';
			html+='</div>';	
			html+='</div>';	
			
			html+='<div class="layui-form-item layui-form-text">';	
			html+='<label name="description" class="layui-form-label">备注</label>';
			html+='<div class="layui-input-block">';							
			html+='<textarea name="remark" class="layui-textarea" placeholder="" style="height: 60px;width: 80%;min-height: 50px;"></textarea>';		
			html+='</div>';	
			html+='</div>';	
			
			// 查询行业类别
			html+='<div class="layui-form-item">';		
			html+='<label class="layui-form-label zdy-required">行业类别</label>';	
			html+='<div class="layui-input-inline">';		
			html+='<ul id="menuZtreeId" class="ztree"></ul>';
			html+='</div>';
			html+='</div>';
			html+='</form>';
			html+='</div>';
			return html;
		}
		
		
		// 树节点
		var ztree_nodes;
			
		// 环境 ztree	
		var ztree_setting = {
		  check: {
		    enable: true
		  },
		  data: {
		    simpleData: {
		      enable: true
		    }
		  }
		};	
		
		// 
		function checkedZtree(treeId, treeNode, clickFlag) {
			// 获取父级name					
			$(".node_name_list").empty().append("<a style='font-size: 15px;'>"+getCommonZtreeFilePath(treeNode)+"</a>");
		}
		
		// 查询菜单列表
		function selectZtreeList(type,roleId){
			var zNodesHtml = [];
			var ztreeUrl = '/sysMenu/selectValidZTreeList';
			if('edit'==type){
				ztreeUrl = '/sysMenu/selectEditZTreeList';
			}
			if(!roleId){
				roleId = "";
			}
			$.ajax({					
		        type: 'post',						
		        url: ztreeUrl,			
		      	data:{'roleId':roleId},														
		        dataType: 'json',	
		        success: function(data) {						
		    		if(data.code==200){										
		    			if(data.dataObject.length>0){
			        		$.each(data.dataObject,function(i,item){	
			        			if(i==0){		
			        				zNodesHtml.push({ id:item.id, pId:item.pId, name:item.name,open:true,checked:item.checked});	
			        			}else {	
			        				zNodesHtml.push({ id:item.id, pId:item.pId, name:item.name,open:item.false,checked:item.checked});	
								}		
			        		})
		    			}						
		    			ztree_nodes = zNodesHtml;					
		    			$.fn.zTree.init($("#menuZtreeId"), ztree_setting, ztree_nodes);
		    		}				
			    },							
			    error: function(data){					
			    	zNodesHtml.push({ id:'-1', pId:'-1', name:'系统繁忙',open:false});	
			    	$.fn.zTree.init($("#menuZtreeId"), ztree_setting, ztree_nodes);
			    }	
		    });			
		}	
		
		// edit-menu-btn
		$(document).on('click', '.edit-role-btn', function() {
			var roleId = $(this).attr("role-id");
			var roleName = $(this).attr("role-name");
			var remark = $(this).attr("remark");
			var index = layer.open({				
				type: 1 ,				  		// 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层
				title: "编辑角色",					// title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
				area: ['70%', '60%'],		// 默认：'auto' 	自适应
				//shade: 1,				  		// 要想显示遮罩需要将这个  注释							
				skin: 'layui-layer-lan',  		// layer内置的skin有：layui-layer-lan layui-layer-molv
				maxmin: true,
				resize:true,		
				shadeClose:false,					
				content:initEditRoleHtml(roleName,remark),					
				btn: ['立即添加','取消'], 	
				btn1: function(){			

				},
				btn2: function(){				
					layer.close(index);		
				},
				cancel: function(){ 

				},		
				success: function(layers){		
					var form = layui.form;
					layers.addClass('layui-form');	
					layers.find('.layui-layer-btn0').attr('lay-filter', 'editRoleFrom').attr('lay-submit', '');//将按钮弄成能提交的
					form.render(); 	
					
					selectZtreeList("edit",roleId);
					
					form.on('submit(editRoleFrom)', function (data) {	
						var treeObj = $.fn.zTree.getZTreeObj("menuZtreeId");
						var nodes = treeObj.getCheckedNodes(true);

						var menuZtreeIdAry = [];
						for (var i = 0; i < nodes.length; i++) {
							menuZtreeIdAry.push(nodes[i].id);
						}	
						if(menuZtreeIdAry.length<1){
							layer.msg("请选择菜单");
							return false;	
						}	
						// 权限菜单
						data.field.menuZtreeIdList = menuZtreeIdAry.join();	
						data.field.roleId = roleId;	
						$.ajax({				
							url: '/sysRole/editInfo', 					// 请求的url地址	
							dataType: 'json', 							// 返回格式为json	
							data: data.field,
							type: 'post', 								// 请求方式		
							async: false,	
							success: function (res) {
								if (res.code == 200) {
									layer.msg("添加成功");	
									layer.close(index);	
									layui.table.reload('layerTable', { page: { curr: 1 }, where: { } });					
								}else{			
									layer.msg(res.msg);	
								}
							},		
							error: function () {

							}
						});
						return false;
					});	

				}	
			});
		})
		
		// 添加角色 html
		function initEditRoleHtml(roleName,remark){
			var html = "";		
			html+='<div style="margin: 40px 20px;">';	
			html+='<form class="layui-form " action="">';
			
			html+='<div class="layui-form-item">';
			html+='<div class="layui-inline">';
			html+='<label class="layui-form-label zdy-required">角色名称</label>';
			html+='<div class="layui-input-inline input-inline-width">';
			html+='<input type="tel" name="roleName" lay-verify="required" maxlength="14" placeholder="请输入角色名称" autocomplete="off" class="layui-input" value='+roleName+'>';
			html+='</div>';
			html+='</div>';	
			html+='</div>';
			
			html+='<div class="layui-form-item layui-form-text">';	
			html+='<label name="description" class="layui-form-label">备注</label>';
			html+='<div class="layui-input-block">';							
			html+='<textarea name="remark" class="layui-textarea" placeholder="" style="height: 60px;width: 80%;min-height: 50px;">'+remark+'</textarea>';		
			html+='</div>';	
			html+='</div>';	
			
			// 菜单权限列表
			html+='<div class="layui-form-item">';		
			html+='<label class="layui-form-label zdy-required">菜单列表</label>';	
			html+='<div class="layui-input-inline">';		
			html+='<ul id="menuZtreeId" class="ztree"></ul>';
			html+='</div>';
			html+='</div>';
			html+='</form>';
			html+='</div>';
			return html;
		}
		
	</script>
</body>
</html>